<template>
  <div class="hotNewsBox">
    <h4 style="margin: 20px 0;text-align: center;">国内热新闻</h4>
    <div class="searchBox">
      <div class="group">
        <input required="" type="text" class="input" v-model="keyWord">
        <span class="highlight"></span>
        <span class="bar"></span>
        <label>请输入</label>
      </div>
      <!-- <div class="btnBox">
        <button @click="handleSearch">
          <span class="transition"></span>
          <span class="gradient"></span>
          <span class="label"><el-icon><Search /></el-icon></span>
        </button>
      </div> -->
      <div class="searchBtn">
        <el-button @click="handleSearch" :icon="Search" circle />
      </div>
    </div>

    <!-- 骨架屏也可以使用样式，只是需要穿透，也可以使用vue中的语法，尽量贴近展示样式 -->
    <el-skeleton animated :loading="loading">

      <template #template>
        <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
          <div class="gujiaBox" style="display: flex;" v-for="item of gujiaList" :key="item.index">
            <el-skeleton-item variant="image" style="width: 200px; height: 140px;" />
            <div style="width: 380px; margin-left: 20px;">
              <el-skeleton-item variant="h3" style="width: 380px; height: 50px;"/>
              <el-skeleton-item variant="text" style="width: 100px;margin: 20px 0px;" />
              <el-skeleton-item variant="text" style="width: 100px;text-align: right;margin-left: 180px;" />
            </div>
          </div>
        </div>
      </template>

      <template #default>
        <div class="newsBody" >
          <div class="newsItem" v-for="item of newsList" :key="item.id" @click="handleTargetNew(item)">
            <div class="item-imgBox">
              <img :src="item.picUrl" :alt="item.title">
            </div>
            <div class="item-body">
              <h3>{{item.title}}</h3>
              <p>新闻来源：{{item.source}}</p>
              <p>报道时间：{{item.ctime}}</p>
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>

    <div class="paging">
      <el-pagination background layout="total prev,->, pager, next" :current-page="pageObj.page" @update:current-page="changePage" :page-size="pageObj.pageSize" :total="40"/>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { getHotNewsList } from '@/request/apis/getText.js'
import {ElMessage} from 'element-plus'
import { Search } from '@element-plus/icons-vue'

import { useConfigStore } from '@/store/config.js'

let gujiaList = ref([
  {
    index: 1
  },
  {
    index: 2,
  },
  {
    index: 3
  },
  {
    index: 4
  },
  {
    index: 5
  },
  {
    index: 6
  },
  {
    index: 7
  },
  {
    index: 8
  },
  {
    index: 9
  },
  {
    index: 10
  }
])

// 表格渲染数据
let newsList = ref([
  {
    id: "e2656b69a4a39a113990652004072d71",
    ctime: "2023-02-09 00:00",
    // 罗亮 刘文君 胡易 盘子兄 刘华兵 彭吉祥 车祖鹏 范娟  赵凤 戴小杰 龙亮 罗潇 周浩辰 向唐明
    // 郑宇 刘登风 谢彩霞 雷波 张超 潘衍汉 殷正大 黄琴 杨渺云 罗斯豪 潘亮 彭玉祥 张洋 张瑶 侯兵
    // 王德明 曾吉平 胡沙 蓝俊西 甘霖 熊家豪 陈大风 陈小雨 刘阳 刘涛 朱佳 朱娟 单雨桐 熊金晶 刘神得
    // 吴思琴 吴香君 龚涛 邓梦圆 李申奥 邓广平 戴豪杰 刘神舟
    title: `国合署：向叙利亚提供3000万元的紧急援助`,
    description: "",
    source: "中华国内",
    picUrl: "https://img2.utuku.imgcdc.com/300x200/news/20230209/f521d287-0951-4bce-bd90-0ca2f8af2168.jpg",
    url: "https://news.china.com/domestic/945/20230209/44415863.html"
  },
  {
    id: "ba64fb379c02adba6f0aa329e7eb313a",
    ctime: "2023-02-09 00:00",
    title: "下月起6项税务证明事项实行告知承诺制", 
    description: "",
    source: "中华国内",
    picUrl: "https://img3.utuku.imgcdc.com/300x200/news/20230209/dcb2c26c-23df-4bec-9560-49264d5b7262.png",
    url: "https://news.china.com/domestic/945/20230209/44415879.html"
  },
])

// 分页组件相关数据
let pageObj = ref({
  page: 1,
  pageSize: 10,
  total: 0,
})

// 控制 loading 效果
let loading = ref(false)

// 输入框文字双向绑定
let keyWord = ref('')

// 是否随机筛选数据
let isReand = ref(false)
 
const configStore = useConfigStore()
//  请求新闻列表数据
async function reqNewsList(){
  loading.value = true

  let params = {
    key: configStore.TXApiKey,
    num: pageObj.value.pageSize,
    page: pageObj.value.page,
    rand: isReand.value,
  }

  // 有关键字时才进行传参，接口未对空数据进行处理
  keyWord.value ? params.word = keyWord.value : '' 

  let {data:res} = await getHotNewsList(params)
  if(res.code !== 200){
    loading.value = false
    return ElMessage.warning(res.msg)
  }  
  newsList.value = res.result.newslist
  loading.value = false
}

reqNewsList()

// 点击搜索
function handleSearch(){
  pageObj.value.page = 1
  reqNewsList()
}

// 页面改变
function changePage(page){
  pageObj.value.page = page
  reqNewsList()
}

// 点击新闻跳转到对应新闻页面
function handleTargetNew(obj){
  window.open(obj.url,"_blank")
}
</script>

<style lang="less" scoped>

// 盒子主体
.hotNewsBox{
  text-align: left;

  .newsBody{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 80%;
    min-height: 570px;
    // overflow: hidden;
    // overflow: scroll;
    padding: 0px 10%;
    // margin: 0 auto;

    .newsItem{
      display: flex;
      width: 48%;
      height: 140px;
      margin: 5px 5px;
      cursor: pointer;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;

      .item-imgBox{
        height: 140px;
        min-width: 200px;
        margin-right: 20px;
        img{
          max-width: 200px;
          height: 140px;
        }
      }

      .item-body{
        flex: 1;
        width: 380px;
        padding-top: 10px;
        h3{
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
        }
        p{
          &:nth-child(2){
            font-size: 14px;
            margin-top: 10px;
          }
          &:nth-child(3){
            font-size: 14px;
            text-align: right;
            color: #ccc;
            margin-top: 10px;
          }
        }
      }
    }

  }
}

// 输入框
.group {
 position: relative;
 margin-right: 40px;
 width: 200px;

  .input {
  font-size: 16px;
  padding: 10px 10px 10px 5px;
  display: block;
  border: none;
  border-bottom: 1px solid #515151;
  background: transparent;
  }

  .input:focus {
  outline: none;
  }

  label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  }

  .input:focus ~ label, .input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
  }

  .bar {
  position: relative;
  display: block;
  width: 200px;
  }

  .bar:before, .bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  }

  .bar:before {
  left: 50%;
  }

  .bar:after {
  right: 50%;
  }

  .input:focus ~ .bar:before, .input:focus ~ .bar:after {
  width: 50%;
  }

  .highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
  }

  .input:focus ~ .highlight {
  animation: inputHighlighter 0.3s ease;
  }

  @keyframes inputHighlighter {
  from {
    background: #5264AE;
  }

  to {
    width: 0;
    background: transparent;
  }
  }
}

// 搜索框模块
.searchBox{
  display: flex;
  justify-content: flex-end;
  padding-right: 50px;

  .btnBox{
    line-height: 60px;
    width: 100px;
    button {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    padding: 0.8em 2.3em;
    font-weight: 500;
    background: #409eff;
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
    border-radius: 0.6em;
    }

    .gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 0.6em;
    margin-top: -0.25em;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
    }

    .label {
    position: relative;
    top: -1px;
    }

    .transition {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: rgba(16, 185, 129, 0.6);
    border-radius: 9999px;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }

    button:hover .transition {
    width: 14em;
    height: 10em;
    }

    button:active {
    transform: scale(0.97);
    }
  }

  .searchBtn{
    vertical-align: middle;
    line-height: 45px;
  }
}

// 毛玻璃效果
.glass-container{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    background-color: rgba(0,191,255, 0.075);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
    border: 2px rgba(255,255,255,0.4) solid;
    border-bottom: 2px rgba(40,40,40,0.35) solid;
    border-right: 2px rgba(40,40,40,0.35) solid;
}

// 分页盒子
.paging{
  margin-top: 20px;
}

/deep/ .el-skeleton{
  padding: 0px 160px;
  box-sizing: border-box;
  .gujiaBox{
    margin: 5px 0px;
  }
}
</style>
